import React, { useEffect, useState } from 'react';

import { Button, Form, Input, Select, Switch, DatePicker, message, ConfigProvider, Radio } from 'antd';
import type { RadioChangeEvent, DatePickerProps } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'antd/locale/zh_CN';
import './recordadd.scss'
import * as service from '../../../../../api/cyyindex'
import { useNavigate,  useSearchParams } from 'react-router-dom';
interface Props {

}
function RecordAdd(props: Props) {
    let [params, setParams] = useSearchParams()
    let [mynum,setNum]=useState<any>('')
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm();
    const navigate = useNavigate()
    const [value, setValue] = useState(1);
    let [nextvalue, setNextvalue] = useState(1)
    const [myform, setMyform] = useState<any>({})
    const [myDate,setDate]=useState('')
    const [myDate1,setDate1]=useState('')
    const [myDate2,setDate2]=useState('')
    const [myDate3, setDate3] = useState('')
    const [myDay,setMayday]=useState('')
    const [myDay1,setMayday1]=useState('')
    const [myDay2,setMayday2]=useState('')
    const [myDay3,setMayday3]=useState('')
    
    useEffect(() => {
        console.log(params.get('id'))
        console.log(params.get('num'))
        setNum(params.get('num'))
        if (params.get('id')) {
            service.record_id1({ eid: params.get('id') }).then(res => {
                console.log(res)
                setMayday(res.data.data[0].starttime)
                setMayday1(res.data.data[0].endtime)
                setMayday2(res.data.data[0].boarddate)
                setMayday3(res.data.data[0].termdate)
                form.setFieldsValue(res.data.data[0])
            })
        }
        if(params.get("num")=='2'){
            setNextvalue(2)
        }
        if(params.get("num")=='3'){
            setNextvalue(3)
        }
    },[])
    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
        
    };
    const onChange1: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
        setDate(dateString)
    };
    const onChange2: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
        setDate1(dateString)
    };
    const onChange3: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
        setDate2(dateString)
    };
    const onChange4: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
        setDate3(dateString)
    };
    const myJump = () => {
        navigate(-1)
      }
    const onFinish = (values: any) => {
        console.log(nextvalue)
        if (nextvalue == 1) {
            setNextvalue(2)
        } else if (nextvalue == 2) {
            setNextvalue(3)
        }
 
        if (mynum != 3) {
            var val1 = mynum + 1
            setNum(val1)
        } 
   
        console.log('Success:', values);
        var arr=myDate.slice(0)
        var arr1=myDate1.slice(0)
        var arr2=myDate2.slice(0)
        var arr3=myDate3.slice(0)
       values.starttime=arr
       values.endtime=arr1
       values.boarddate=arr2
       values.termdate=arr3
        setMyform({ ...myform, ...values })
        
        };
     
        const onFinishFailed = (errorInfo: any) => {
          console.log('Failed:', errorInfo);
    };
    // useEffect(() => {
    //     if (nextvalue == 1) {
    //         setNextvalue(2)
    //     } else if (nextvalue == 2) {
    //         setNextvalue(3)
    //     }

    // },[nextvalue])
    const myClick = () => {
        if (params.get("id")) {
            myform.eid = Number(params.get('id'))
            console.log(myform.eid)
            service.record_edit1(myform).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    messageApi.open({
                      type: 'success',
                      content: '修改成功',
                    });
                    navigate('/index/staff/record')
                  } 
            })
        } else {
            service.record_add1(myform).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    messageApi.open({
                      type: 'success',
                      content: '添加成功',
                    });
                    navigate('/index/staff/record')
                  } 
                 
          
                }) 
        }
       

    
 }
    return (
        <div className='record-add'>

            {contextHolder}
            <p className='title'>新增{ nextvalue == 1?'教育经历':nextvalue==2?'工作经历':'证书信息' }</p>
       
                
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 1200, marginTop: 20 }}
                initialValues={{ remember: true }}
                layout='inline'
                autoComplete="off"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="选择员工"
                    name="name"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="员工编号"
                    name="wokers"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="部门"
                    name="section"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                     <Select
      defaultValue="请选择"
     options={[
        { value: '行政', label: '行政' },
        { value: '人事', label: '人事' },
        { value: '策划', label: '策划' },
        { value: '产品', label: '产品', },
        { value: '设计', label: '设计', },
        { value: '研发', label: '研发', },
      ]}
    />
                </Form.Item>
                <Form.Item
                    label="职位"
                    name="station"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Select
      defaultValue="请选择"
    
      options={[
        { value: '产品经理', label: '产品经理' },
        { value: '设计主管', label: '设计主管' },
        { value: '设计师', label: '设计师' },
        { value: '前台', label: '前台',  },
      ]}
    />
                </Form.Item>
             
         
                {
                    nextvalue == 1 ||mynum==1 ?     <>
                            
                    <Form.Item
                  label="学历"
                  name="education"
                  rules={[{ required: true, message: 'Please input your password!' }]}
              >
                  <Select
                      defaultValue="请选择"
                      options={[
                          { value: '本科', label: '本科' },
                          { value: '专科', label: '专科' },
                          { value: '硕士', label: '硕士' },
                          { value: '博士', label: '博士', },
                      ]}
                  />
                          </Form.Item> 
                          <Form.Item
                  label="院校"
                  name="school"
                  rules={[{ required: true, message: 'Please input your username!' }]}
              >
                  <Input placeholder='请输入' />
                          </Form.Item>  
                          <Form.Item
                  label="专业"
                  name="major"
              >
                  <Input placeholder='请选择' />
                          </Form.Item> 
              
                          <Form.Item
                  label="开始时间"
                  name="starttime"
              >
                  {
            params.get('id') ?
              <ConfigProvider locale={locale}>
            <DatePicker value={dayjs(myDay, 'YYYY-MM-DD')} onChange={onChange1} />
          </ConfigProvider>:
            <ConfigProvider locale={locale}>
            <DatePicker  onChange={onChange1} />
          </ConfigProvider>
          }
              </Form.Item>
              <Form.Item
                  label="结束时间"
                  name="endtime"
              >
                  {
            params.get('id') ?
              <ConfigProvider locale={locale}>
            <DatePicker value={dayjs(myDay1, 'YYYY-MM-DD')} onChange={onChange2} />
          </ConfigProvider>:
            <ConfigProvider locale={locale}>
            <DatePicker  onChange={onChange2} />
          </ConfigProvider>
          }
                          </Form.Item> 
                          <Form.Item
                  label="教育类型"
                  name="type"
              >
                  <Select
                      defaultValue="请选择"
                      options={[
                          { value: '全日制', label: '全日制' },
                          { value: '成人教育', label: '成人教育' },
                          { value: '远程教育', label: '远程教育' },
                          { value: '非全日制', label: '非全日制', },
                      ]}
                  />
              </Form.Item>

              <Form.Item
                  label="是否取得学位"
                              name="flag"
                              
              >
                  <Radio.Group onChange={onChange} value={value}>
                      <Radio value={true}>是</Radio>
                      <Radio value={false}>否</Radio>

                  </Radio.Group>
              </Form.Item>        
                  </>  :''
                    
                }
                     {
                    nextvalue == 2 ||mynum==2 ?
                        <>
                        <Form.Item
                    label="公司名称"
                    name="company"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                    
                    
                >
                    <Input placeholder='请输入' />
                            </Form.Item>
                            <Form.Item
                    label="职位"
                    name="job"
                >
                    <Input placeholder='请输入' />
                            </Form.Item>
                            <Form.Item
                    label="入职日期"
                    name="boarddate"
                >{
                    params.get('id') ?
                      <ConfigProvider locale={locale}>
                    <DatePicker value={dayjs(myDay2, 'YYYY-MM-DD')} onChange={onChange3} />
                  </ConfigProvider>:
                    <ConfigProvider locale={locale}>
                    <DatePicker  onChange={onChange3} />
                  </ConfigProvider>
                  }
                </Form.Item>
                <Form.Item
                    label="离职日期"
                    name="termdate"
                >
                    {
              params.get('id') ?
                <ConfigProvider locale={locale}>
              <DatePicker value={dayjs(myDay3, 'YYYY-MM-DD')} onChange={onChange4} />
            </ConfigProvider>:
              <ConfigProvider locale={locale}>
              <DatePicker  onChange={onChange4} />
            </ConfigProvider>
            }
                </Form.Item>
                <Form.Item
                    label="工作时长"
                    name="time"
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="离职薪资"
                    name="money"
                >
                    <Input placeholder='请输入' />
                </Form.Item></> : ''
               }
                {
                    nextvalue == 3||mynum==3 ?
                        <>
                         
                <Form.Item
                    label="证书名称"
                    name="certificate"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="证书类型"
                    name="certificatetype"
                >
                    <Select
                        defaultValue="请选择"
                        options={[
                            { value: '项目管理', label: '项目管理' },
                            { value: '人力资源', label: '人力资源' },
                            { value: '语言', label: '语言' },
                            { value: '管理', label: '管理', },
                        ]}
                    />
                </Form.Item>
                <Form.Item
                    label="发证机构"
                    name="authority"
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="证书编号"
                    name="number"
                >
                    <Input placeholder='请输入' />
                </Form.Item>   
                    </> : ''
                }
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <div className='btn'>
                   
                    {
                        nextvalue==3? <Button type="primary" htmlType="submit" onClick={()=>{myClick()}}>
                        保存
                    </Button>: <Button type="primary" htmlType="submit">
                        保存并完善档案
                    </Button>
                    }
                        <Button onClick={() => {myJump()}} >取消</Button>
                    </div>
                    
                </Form.Item>
            </Form>
        </div>
    );
}

export default RecordAdd;